<template>
	<div class="Calendar">
		<ele-calendar
			:defaultValue="time"
			:render-content="renderContent"
			:data="holiday"
			:prop="prop"
			@select="selectDay"
			selectionMode="dates"
		></ele-calendar>
	</div>
</template>
<script>
import eleCalendar from "ele-calendar";
import "ele-calendar/dist/vue-calendar.css";
export default {
	name: "Calendar",
	components: {
		eleCalendar,
	},
	props: ["date", "holiday"],
	data () {
		return {
			prop: "holidayDate",
		};
	},
	computed: {
		time () {
			return new Date(this.date);
		},
	},
	methods: {
		// 内容区的渲染 Function
		renderContent (h, parmas) {
			//设置lunarcalendar=true,parmas返回值包含农历
			const loop = (data) => {
				let colorStr = parmas.defvalue.value.type === 0 ? "red" : "black";
				return h(
					"div",
					{
						class: `${colorStr}`,
					},
					data.defvalue.text
				);
			};
			return <div>{loop(parmas)}</div>;
		},
		// 选择日期的数组及节点
		selectDay (val) {
			this.$emit("clickSelectDay", val);
		},
	},
};
</script>
<style lang="scss" >
.Calendar {
	/*时间控件*/
	.el-input__inner {
		font-family: "DIN";
		height: 32px !important;
		line-height: 32px !important;
	}
	.el-date-table-calendar td.today[data-v-55be3324] {
		color: #606266 !important;
		font-weight: normal !important;
	}
	.el-date-table-calendar th {
		text-align: center !important;
	}
	.next-month .black,
	.next-month .red-color,
	.prev-month .black,
	.prev-month .red-color {
		visibility: hidden;
	}
	.next-month,
	.prev-month {
		pointer-events: none; // 禁止点击
	}
	.el-picker-panel-calendar__icon-btn {
		display: none;
	}
	.el-date-picker-calendar__header span:first-of-type {
		display: none;
	}
	#upload-box .el-button--primary {
		width: 160px;
		height: 80px;
		opacity: 1;
		cursor: pointer;
		color: #666;
		background: transparent;
		border: 1px solid #ccc;
		position: absolute;
		bottom: 0;
		left: 0;
		font-size: 16px;
	}
}
</style>
